/**
 * Created by zzy on 2017/8/25.
 */
import React, {Component} from 'react';
import {
    Text,
    View,
    TouchableOpacity,
    Image,
    StyleSheet,
    ScrollView,
    Dimensions,
    FlatList,
    InteractionManager
} from 'react-native';
import {GradientRadiusButton} from '../../component/Button'
import NetRequest from '../../util/NetRequest'

export default class WaterTiketList extends Component {

    constructor(props) {
        super(props);
        this.state = {
            list: []
        }
    }

    render() {
        let {navigate,filter} = this.props;
        return <FlatList
            onRefresh={this._onRefresh.bind(this)}
            refreshing={false}
            onEndReachedThreshold={0.1}
            onEndReached={this._onEndReached.bind(this)}
            data={this.state.list.filter(l=>l.status==filter)}
            keyExtractor={(item, index) => index}
            style={{marginTop: 15}}
            renderItem={({item}) => <TiketCell
                item={item}
                callback={() => {
                    navigate('ConfirmOrder',{userTicketId:item.userTicketId});
                }
            }/>}
        />
    }

    componentDidMount() {
        InteractionManager.runAfterInteractions(() => {
            let param = {};
            NetRequest.userWaterTicketModelList(param).then((data) => {
                LOG('水票列表------------' + JSON.stringify(data));
                this.setState({
                    list: data.userWaterTicketModelList
                })
            })
        })
    }

    _onRefresh() {

    }

    _onEndReached() {

    }

}

const CanUseCom  =({item,click})=>{
    return <View style={{alignItems:'center'}}>
        <Text style={{color: '#F64F36', marginBottom: 3}}>剩{item.restDay}</Text>
        <GradientRadiusButton
            title="立即使用"
            colors={['#ff680f', '#ff2d2d']}
            onPress={click}
        />
    </View>
}

const UsedCom  =()=>{
    return <Image source={require('../../../asserts/ticket/Already-in-use.png')}/>
}

const RightCom = ({item,click}) => {
    let Right = <CanUseCom
        click={click}
        item={item}/>
    if(item.status!= '未使用'){
        Right = <UsedCom item={item}/>
    }
    return <View style={{
        flexDirection:'row',
        justifyContent:'space-between',
        flex:1,
        paddingHorizontal: 10,
        alignItems:'center'
    }}>
        <View>
            <Text style={{color: 'black', fontSize: 18}}>{item.brandName}</Text>
            <Text style={{marginTop: 3}}>{item.productName}</Text>
        </View>
        <View style={{marginRight: 10, alignItems: 'center', backgroundColor: '#00000000'}}>
            {Right}
        </View>
    </View>
}

class TiketCell extends Component {
    render() {
        let {callback, item} = this.props;
        return <TouchableOpacity
            activeOpacity={1}
            style={{flexDirection: 'row', alignItems: 'center', justifyContent: 'center', marginTop: 5}}
            onPress={() => {
                if (item.status == '未使用') {
                    callback();
                }
            }}>

            <Image
                style={{
                    width: 88,
                    height: 90,
                    alignItems: 'center',
                    justifyContent: 'center',
                    backgroundColor: '#00000000'
                }} source={require('../../../asserts/ticket/wode_shuipiao_left_bg.png')}>
                <Text style={{color: '#F64F36', fontSize: 23}}>{item.count}
                    <Text style={{fontSize: 15}}>张</Text>
                </Text>
                <Text style={{color: '#F64F36', fontSize: 15}}>平台通用</Text>
            </Image>
            <Image
                style={{
                    width: 247,
                    height: 90,
                    flexDirection: 'row',
                    alignItems:'center',
                    backgroundColor: '#00000000'
                }} source={require('../../../asserts/ticket/wode_shuipiao_right_bg.png')}>
                <RightCom
                    click={callback}
                    item={item}/>
            </Image>
        </TouchableOpacity>
    }
}
